<template>
  <div>
    <div class="incomebox flex aligncenter mb_20">
      <img src="@/assets/images/j_pic.png" alt="" class="l_img mr_15" />
      <div>
        <div class="c_fff f-14 mb_6">总充值金额（元）</div>
        <div class="c_fff fw f-24">2345678</div>
      </div>
    </div>
    <div class="bg_fff boxflex">
      <div class="flexrowbetween">
        <div class="flex f-16 c_000 aligncenter mb_20">
          <div class="line mr_10"></div>
          结算记录
        </div>
        <div class="flex aligncenter mb_10">
          <div
            v-for="(item, index) in days"
            :key="index"
            class="dataname f-14 commhover"
            :class="{ active: daynum == item.value }"
            @click="handleClick(item)"
          >
            {{ item.name }}
          </div>
          <el-date-picker
            class="mr_20"
            v-model="time"
            size="small"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
          <el-button
            plain
            type="primary"
            class="exportbtn"
            size="small"
            @click="handleExport"
            >导出</el-button
          >
        </div>
      </div>
      <div class="flex mb_12">
        <div class="acitem noborder_r flexcenter f-14 commhover" :class="{active:active==1}" @click="handleClickTable(1)">结算收入</div>
        <div class="acitem flexcenter f-14 commhover" :class="{active:active==2}" @click="handleClickTable(2)">广告收入明细</div>
      </div>
      <div class="">
        <el-table v-if="active==1"
          v-loading="loading"
          :data="tableData"
          ref="tablelayout"
          class="commtable"
        >
          <el-table-column
            align="center"
            label="结算时间"
            prop="id"
          ></el-table-column>
          <el-table-column
            align="center"
            label="结算类型"
            prop="user_login"
          ></el-table-column>
          <el-table-column
            align="center"
            label="结算进度"
            prop="mobile"
          ></el-table-column>
          <el-table-column
            align="center"
            label="原始收入（元）"
            prop="mobile"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.all_coin || "-" }}</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="结算收入（元）"
            prop="email"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.email || "-" }}</span>
            </template>
          </el-table-column>
        </el-table>
        <el-table v-if="active==2"
          v-loading="loading"
          :data="tableData"
          ref="tablelayout"
          class="commtable"
        >
          <el-table-column
            align="center"
            label="结算区间"
            prop="id"
          ></el-table-column>
          <el-table-column
            align="center"
            label="广告位"
            prop="user_login"
          ></el-table-column>
          <el-table-column
            align="center"
            label="结算进度"
            prop="mobile"
          ></el-table-column>
          <el-table-column
            align="center"
            label="原始收入（元）"
            prop="mobile"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.all_coin || "-" }}</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="实际收入"
            prop="email"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.email || "-" }}</span>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="queryParams.page"
          :limit.sync="queryParams.num"
          @pagination="getList"
        />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      queryParams: {
        page: 1,
        num: 10,
      },
      total:0,
      loading: false,
      days: [
        { name: "昨日", value: 1 },
        { name: "今日", value: 2 },
        { name: "本月", value: 3 },
        { name: "全年", value: 4 },
      ],
      daynum: 1,
      active:1,
      tableData: [],
      total: 0,
    };
  },
  methods: {
    getList() {},

    handleClick(num) {
      this.daynum = num.value;
    },

    handleClickTable(val){
      this.active = val
    },
  },
};
</script>

<style lang="scss" scoped>
.incomebox {
  width: 100%;
  height: 95px;
  padding: 0 30px;
  background: url("~@/assets/images/fin_bg.png") 100% 100% no-repeat;
  background-size: cover;
}
.l_img {
  width: 62px;
  height: 55px;
}
.boxflex {
  padding: 16px 20px;
  .line {
    width: 2px;
    height: 18px;
    background-color: #1670f1;
  }
}
.dataname {
  margin-right: 22px;
  color: #8e8e8e;
  position: relative;
  &.active {
    color: #000;
  }
  &.active::after {
    position: absolute;
    content: "";
    width: 28px;
    height: 2px;
    background-color: #1670f1;
    bottom: -6px;
    left: 0;
  }
}
.acitem{
  width: 110px;
  height: 32px;
  border: 1px solid #CCD4DF;
  color: #000;
  background-color: #F6F9FC;
  &.active{
    color: #1670f1;
    background-color: #fff;
  }
}
.noborder_r{
  border-right: 0;
}
</style>
